<template>
  <div id="category">
    <nav-bar class="category-nav"><div slot="center">商品分类</div></nav-bar>
    <div class="content">
      <tab-menu :categories="categories"
                @selectItem="selectItem">

      </tab-menu>
      <div class="category-scroll">
        <tab-control :titles="['综合', '新品', '销量']"
                     @tabClick="tabControlClick"
                     ref="tabControl1"
                     class="tab-control"
                     v-show="isTabFixed"/>
        <scroll id="tab-content"
                :probe-type="3"
                @scroll="contentScroll">
          <div>
            <tab-content-category :subcategories="showSubcategory"/>
            <tab-control :titles="['综合', '新品', '销量']"
                         @tabClick="tabControlClick"
                         ref="tabControl2"/>
            <tab-content-detail :category-detail="showCategoryDetail"/>
          </div>
        </scroll>
      </div>
    </div>
  </div>
</template>

<script>
  import Scroll from "components/common/scroll/Scroll";
  import NavBar from "components/common/navbar/NavBar";

  import TabMenu from "@/views/category/childComps/TabMenu";
  import TabContentCategory from "@/views/category/childComps/TabContentCategory";
  import TabControl from "@/components/content/tabControl/TabControl";
  import TabContentDetail from "@/views/category/childComps/TabContentDetail";

  import { getCategory, getSubcategory, getCategoryDetail } from "network/category";
  import {POP, SELL, NEW} from "@/common/const";
  import {categoryImgListenerMixin, tabControlMixin} from "@/common/mixin";

  export default {
    name: "Category",
    components: {
      NavBar,
      Scroll,
      TabMenu,
      TabContentCategory,
      TabControl,
      TabContentDetail
    },
    mixins: [categoryImgListenerMixin, tabControlMixin],
    data() {
      return {
        categories: [],
        categoryData: {

        },
        currentIndex: -1,
        isTabFixed: false // tabControl 是否吸顶
      }
    },
    // created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
    // mounted:在模板渲染成html后调用，通常是初始化页面完成后，
    //         再对html的dom节点进行一些需要的操作
    created() {
      // 1.请求分类数据
      this.getCategory()
    },
    computed: {
      showSubcategory() {
        if (this.currentIndex === -1) return []
        return this.categoryData[this.currentIndex].subcategories.list
      },
      showCategoryDetail() {
        if (this.currentIndex === -1) return []
        return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
      }
    },
    methods: {
      // 网络请求相关的方法
      getCategory() {
        getCategory().then(res => {
          // 1.获取分类数据
          this.categories = res.data.category.list
          // 2.初始化每个类别的子数据
          for (let i = 0; i < this.categories.length; i++) {
            this.categoryData[i] = {
              subcategories: {},
              categoryDetail: {
                'pop': [],
                'new': [],
                'sell': []
              }
            }
          }
          // 3.请求第一个分类的数据
          this.getSubcategories(0);
        })
      },
      getSubcategories(index) {
        this.currentIndex = index
        const mailKey = this.categories[index].maitKey
        getSubcategory(mailKey).then(res => {
          this.categoryData[index].subcategories = res.data
          // Vue 不能检测通过数组索引直接修改一个数组项
          this.categoryData = {...this.categoryData}
          this.getCategoryDetail(POP)
          this.getCategoryDetail(NEW)
          this.getCategoryDetail(SELL)
        })
      },
      getCategoryDetail(type) {
        // 1.获取 miniWallkey
        const miniWallkey = this.categories[this.currentIndex].miniWallkey;
        // 2.发送请求，传入对应的 miniWallkey 和 type
        getCategoryDetail(miniWallkey, type).then(res => {
          // 3.保存数据
          this.categoryData[this.currentIndex].categoryDetail[type] = res
          this.categoryData = {...this.categoryData}
        })
      },

      // 响应点击切换展示的商品类型的事件
      selectItem(index) {
        this.getSubcategories(index)
      },

      // 监听滚动区域滚动了多少距离
      contentScroll(position) {
        // 决定 tabControl 是否吸顶
        this.isTabFixed = (-position.y) > this.tabOffsetTop
        // console.log(this.isTabFixed)
      }
    }
  }
</script>

<style scoped>
  #category {
    /*视口高度为100%*/
    height: 100vh;
    position: relative;
  }

  .category-nav {
    background-color: var(--color-tint);
    color: #fff;
  }

  .content {
    height: calc(100vh - 44px - 49px);
    display: flex;
  }

  .category-scroll {
    position: relative;
    flex: 1;
  }

  #tab-content {
    position: absolute;
    top: 0;
    height: 100%;
  }

  .tab-control {
    position: relative;
    z-index: 9;
  }
</style>
